<template>
  <div class="repository-container">
    <div class="search-box">
      <van-dropdown-menu active-color="#3378FF">
        <van-dropdown-item
          v-model="category"
          :options="categoryOption"
          @change="changeCategory"
        />
      </van-dropdown-menu>
      <form
        action="/"
        class="form-search"
      >
        <van-search
          v-model="searchKey"
          shape="round"
          placeholder="搜索知识名称/知识代码"
          @search="getKnowListByDeviceModelId"
          @clear="getKnowListByDeviceModelId"
        />
      </form>
    </div>

    <ul
      class="record-list scroll-box"
      v-if="repositoryList.length"
    >
      <li
        v-for="item in repositoryList"
        :key="item.id"
        @click="jumpDetail(item)"
      >
        <div class="item">
          <div class="item-top">
            <span class="item-name">{{ item.title }}</span>
            <!-- <p
              class="item-download"
              v-if="item.file_name"
              v-has="'deviceCenter:deviceManage:detail:repository:list:download'"
              @click="download(item)"
            >
              <i class="iconfont iconxiazai"></i>
              下载附件
              查看
            </p> -->
          </div>
          <div class="item-bottom">
            <span>知识代码：{{ item.id}}</span>
            <span>知识分类：{{ item.category_name }}</span>
          </div>
        </div>
      </li>
    </ul>

    <div
      class="no-data-box"
      v-if="noDataState"
    >暂无数据</div>
  </div>
</template>

<script>
import { Search, DropdownMenu, DropdownItem } from 'vant';
import { getKnowCategoryList, getKnowListByDeviceModelId } from '@/api/deviceManage.js';

export default {
  name: 'RepositoryList',
  components: {
    [Search.name]: Search,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem
  },
  data() {
    return {
      category: '',
      searchKey: '',
      categoryOption: [],
      repositoryList: [],
      noDataState: false
    };
  },
  created() {
    console.log('repository');
    this.getKnowCategoryList();
    this.getKnowListByDeviceModelId();
  },
  methods: {
    // 获取类别
    getKnowCategoryList() {
      getKnowCategoryList().then(res => {
        let categoryArr = [
          {
            text: '全部分类',
            value: ''
          }
        ];
        if (res.data.list && res.data.list.length) {
          res.data.list.map(item => {
            categoryArr.push({
              text: item.name,
              value: item.id
            });
          });
        }
        this.categoryOption = categoryArr;
      });
    },
    // 获取列表
    getKnowListByDeviceModelId() {
      getKnowListByDeviceModelId({
        category_id: this.category,
        keyword: this.searchKey
      }).then(res => {
        this.repositoryList = res.data.list || [];
        if (!this.repositoryList.length) {
          this.noDataState = true;
        }
      });
    },
    // 切换类型
    changeCategory(value) {
      this.category = value;
      this.getKnowListByDeviceModelId();
    },
    // 下载
    download(item) {
      console.log('下载--', item.file_name, item.file_url);
      let a = document.createElement('a');
      a.className = 'download-repository';
      a.download = item.file_name;
      a.href = item.file_url;
      a.style.display = 'none';
      document.querySelector('body').appendChild(a);
      a.click();
      document.querySelector('body').removeChild(a);
    },
    // 跳转到知识详情
    jumpDetail(item) {
      if (this.$checkBtnPermission('deviceCenter:deviceManage:detail:repository:list:detail')) {
        localStorage.setItem('deviceDetailTab', '知识库');
        this.$router.push({
          name: 'repositoryDetail',
          query: {
            id: item.id
          }
        });
      } else {
        this.$toast(this.$store.state.noDetailPermissionText);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.repository-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .search-box {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 1.44rem;
    border-bottom: 1px solid var(--border-color);

    .van-dropdown-menu {
      height: 100%;
      background-color: #fff;

      ::v-deep .van-dropdown-menu__bar {
        height: 100%;
        box-shadow: unset;
      }
    }

    .van-search {
      flex: 1;
    }
  }

  .record-list {
    flex: 1;
    padding-bottom: 0.213333rem;

    li {
      width: 100%;
      margin-top: 0.213333rem;
      padding: 0.426667rem;
      background-color: #fff;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .item-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0.266667rem;

          .item-name {
            font-size: 0.4rem;
          }

          .item-download {
            display: flex;
            align-items: center;
            font-size: 0.32rem;
            color: var(--color-primary);

            i {
              margin-right: 0.053333rem;
            }
          }
        }

        .item-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0.32rem;
          color: var(--color-gray);
        }
      }
    }
  }
}
</style>